<template>
	<view :style="[AppSkinVar]">
		<view class="pay-success-header e-p-20 e-m-b-20">
			<view class="pin-box"></view>
			<view class="text-center text-header-box e-flex-xy-center">
				<text class="c-white e-font-84">{{$t('spellgroup.yqhyyqp')}}</text>
			</view>

		</view>
		<view class="e-p-l-20 e-p-r-20 custom-box-2">
			<view class="e-flex e-p-20 bg-white e-m-b-20 e-radius-10" v-if="goodsInfo">
				<load-image mode="aspectFill" :size="['220rpx']"  :src="goodsInfo.commodityUrl">
				</load-image>
				<view class="e-m-l-20">
					<view class="e-line-2 e-p-b-20">
						{{goodsInfo.commodityName}}
					</view>
					<view class="e-m-b-28 e-flex">
						<view class="group-box-1" :style="{color: AppSkin.primary}">
							<text class="e-font-24">{{groupInfo.groupNum}} {{$t('spellgroup.pg')}}</text>
						</view>
						<view class="group-box-2 e-m-l-20">
							<text class="c-secondary e-font-24">{{groupInfo.nowNum}} {{$t('spellgroup.pgs')}}</text>
						</view>
					</view>
					<view class="price fw-600 c-red">
						<text class="e-font-24">{{$unitEn}}</text>
						<text class="e-font-32">{{ goodsInfo.deputyMoneyPay }}</text>
					</view>
				</view>
			</view>
			<view class="spell-panel e-p-b-40">
				<SepllPerson :type="1" :groupInfo="groupInfo"></SepllPerson>
				<view class="e-p-b-32 text-center e-font-24 c-333 e-flex-xy-center">
					<text>{{$t('spellgroup.surplus')}}</text>
					<view class="e-flex c-red e-font-28 e-m-l-12 e-m-r-12">
						<view class="red-box">
							{{hours}}
						</view>
						:
						<view class="red-box">
							{{minute}}
						</view>
						:
						<view class="red-box">
							{{seconds}}
						</view>
					</view>
					<text>{{$t('spellgroup.end')}}</text>
				</view>
				<view class="spell-btn e-flex-xy-center e-m-l-40 e-m-r-40"
					@tap="$goTo('/pages/systemPay/goods/previewGroupOrder', {skuId:goodsInfo.commoditySpecId,qty:1,type:1,groupCode:groupCode})">
					<text class="e-font-30 c-white">{{$t('spellgroup.ljct')}}</text>
				</view>
			</view>
		</view>
		<view class="e-p-20 bg-white spell-strategy">
			<view class="c-333 e-font-28 e-m-b-20">
				<text class="fw-600">{{$t('spellgroup.ptgl')}}</text>
			</view>
			<view class="e-flex e-p-b-20">
				<view class="e-flex-1 e-flex e-flex-column e-flex-center text-center">
					<image class="img-56" src="../static/spell-bag.png" mode=""></image>
					<view class="">
						{{$t('spellgroup.kthct')}}
					</view>
					<view class="" v-if="!$isEnglishVersion">
						{{$t('spellgroup.xtgj')}}
					</view>
				</view>
				<view class="">
					<image class="img-24-12" src="../static/spell-arrow.png" mode=""></image>
				</view>
				<view class="e-flex-1 e-flex e-flex-column e-flex-center text-center">
					<image class="img-56" src="../static/spell-add.png" mode=""></image>
					<view class="">
						{{$t('spellgroup.yqhy')}}
					</view>
					<view class="" v-if="!$isEnglishVersion">
						{{$t('spellgroup.ctyhd')}}
					</view>
				</view>
				<view class="">
					<image class="img-24-12" src="../static/spell-arrow.png" mode=""></image>
				</view>
				<view class="e-flex-1 e-flex e-flex-column e-flex-center text-center">
					<image class="img-56" src="../static/spell-delivery.png" mode=""></image>
					<view class="">
						{{$t('spellgroup.rmkt')}}
					</view>
					<view class="" v-if="!$isEnglishVersion">
						{{$t('spellgroup.bmtk')}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import SepllPerson from '../child/spellPerson.vue'
	import {getGroupByPayCode } from '@/common/request/api'
	import type { GroupByPayData } from '@/common/request/api'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import { getInterval,padZero } from '@/common/utils'

	const props = defineProps({
		paycode: {
			type: String,
			required: true
		},
		groupCode: String
	})


	let timer : number | undefined = undefined
	const hours = ref('')
	const minute = ref('')
	const seconds = ref('')

	const goodsInfo = ref<GroupByPayData['deputy'][0] | null>(null)
	const groupInfo = ref<GroupByPayData | null>(null)


	const handleGetGoodsInfo = () => {
		getGroupByPayCode({ payCode: props.paycode }).then(res => {

			groupInfo.value = res.data
			// state 0拼团中 1拼团成功 2拼团失败退款
			if (groupInfo.value) {
				startCountdown(res.data.overTime)
				// 页面分享的初始化
				goodsInfo.value = res.data.deputy[0]
				if (res.data.state === 1) {
					groupInfo.value.nowNum = groupInfo.value.groupNum
					groupInfo.value.headUrls.length = groupInfo.value.groupNum
				} else if (res.data.state === 2) {
					uni.navigateTo({
						url: '/'
					})
				}
			} else {
				setTimeout(() => {
					handleGetGoodsInfo()
				}, 1000)
			}

		})
	}
	// 拼团倒计时
	const startCountdown = (time : string) => {

		const overTime = new Date(time).getTime()
		const nowTime = new Date().getTime()
		if (overTime > nowTime) {
			const date = getInterval(overTime)
			hours.value = padZero(date.h)
			minute.value = padZero(date.m)
			seconds.value = padZero(date.s)
			timer = setTimeout(() => { startCountdown(time) }, 1000)
		} else {
			clearTimeout(timer)
			timer = undefined
			if (!groupInfo.value?.state) {
				handleGetGoodsInfo()
			}

		}
	}


	onLoad(() => {
		let token = uni.getStorageSync('token')
		if (!token) {
			ctx.$goLogin({
				isShowModal:false
			})
			return
		}
		handleGetGoodsInfo()
	})

	onShow(() => {
		if (!groupInfo.value) {
			handleGetGoodsInfo()
		}
	})
</script>

<style lang="scss" scoped>
	.scroll-y {
		height: 100vh;
	}

	.pay-success-header {
		background: linear-gradient(360deg, #F5222D 0%, #FF6B65 100%);
		height: 412rpx;
		position: relative;

		.text-header-box {
			width: 100vw;
			height: 412rpx;

		}

		.pin-box {
			width: 300rpx;
			height: 296rpx;
			// background-image: url('../static/pin.png');
			// background-size: cover;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
		}
	}

	.spell-panel {
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.spell-btn {
		height: 90rpx;
		background: #F5222D;
		border-radius: 45rpx;
	}

	.red-box {
		background: rgba(245, 34, 45, 0.1);
		border-radius: 4px;
		padding: 2rpx;
		line-height: 32rpx;
		margin: 0 6rpx;
	}

	.spell-strategy {
		margin: 0 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		// margin-top: 660rpx;
		margin-top: 20rpx;
	}

	.img-24-12 {
		width: 24rpx;
		height: 12rpx;
	}

	.e-flex-column {
		flex-direction: column;
	}

	.e-font-84 {
		font-size: 64rpx !important;
	}

	.e-p-t-100 {
		padding-top: 150rpx;
	}

	.group-box-1 {
		padding: 4rpx 20rpx;
		border-radius: 4px;
		line-height: 34rpx;
	}

	.custom-box-2 {
		position: relative;
		z-index: 999;
		margin-top: -80px;
	}
</style>